<!-- 商品展示页 -->
<template>
  <div class="showList">
    <div class="container">
      <ul class="showList">
        <li v-for="(item,i) in homeProductList"
          :key="i">
          <img :src="item.image_url"
            alt="">
          <h4>{{item.short_name}}</h4>
          <div class="goodsButtom">
            <span>￥{{item.normal_price|price}}</span>
            <span>{{item.sales_tip}}</span>
            <div class="goodsimg">
              <img :src="key.avatar"
                alt=""
                v-for="(key,i) in item.bubble"
                :key="i">
            </div>
            <button>去拼单></button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  computed: {
    ...mapState(['homeProductList'])
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
.showList {
  width: 100%;
  background: #ffffff;
  padding: 0.3125rem 0rem;

  .container {
    width: 100%;

    .showList {
      width: 100%;
      display: flex;
      flex-direction: column;

      li {
        display: flex;
        flex-direction: column;

        img {
          width: 100%;
        }

        h4 {
          height: 3.375rem;
          line-height: 1.5rem;
          padding: 0.3125rem 0.1875rem;
          overflow: hidden;
        }

        .goodsButtom {
          width: 100%;
          display: flex;
          flex-derection: row;
          padding: 0.625rem 0rem;
          justify-content: center;
          align-items: center;

          span:first-child {
            color: red;
            font-size: 1.25rem;
            margin-right: 0.16px;
            font-weight: bold;
            flex: 1;
            padding: 0rem 0.5rem;
          }

          span {
            color: #9c9c9c;
            font-size: 0.75rem;
            flex: 2;
          }

          .goodsimg {
            flex: 1;

            img {
              width: 40%;
              border-radius: 50%;
            }

            img:last-child {
              margin-left: 0.3125rem;
            }
          }

          button {
            flex: 2;
            height: 2.125rem;
            margin-right: 0.3125rem;
            background: red;
            color: white;
            font-size: 0.875rem;
            letter-spacing: 0.125rem;
            border-radius: 0.875rem;
          }
        }
      }
    }
  }
}
</style>
